.page {
	padding: 15rpx;

	.swiper {
		position: relative;
		
		.swiper-view{
			width: 720rpx;
			height: 540rpx;
			
			.swiper-item{
				position: relative;
				width: 720rpx;
				height: 540rpx;
				
				image{
					width: 720rpx;
					height: 540rpx;
				}
				
				.swiper-item-title{
					position: absolute;
					left: 20rpx;
					bottom: 30rpx;
					width: 680rpx;
					
					text{
						display: block;
						
						&:nth-child(1){
							font-size: 16px;
							font-weight: bold;
							color: #fff;
							margin-bottom: 20rpx;
						}
						
						&:nth-child(2){
							font-size: 12px;
							color: #ccc;
						}
					}
				}
			}
		}
		
		.swiper-dots{
			position: absolute;
			left: 20rpx;
			bottom: 10rpx;
			width: 680rpx;
			display: flex;
			
			.swiper-dots-item{
				height: 2px;
				flex-grow: 1;
				margin: 0 5rpx;
				background: rgba(140, 140, 140, 0.5);
			}
			
			.swiper-dots-active{
				background: #fff;
			}
		}
	}
	
	.article{
		padding-top: 20rpx;
		
		.article-item{
			margin-bottom: 20rpx;
			display: flex;
			height: calc(200rpx * 0.75);
			padding: 10rpx;
			border-bottom: 1px solid #f5f5f5;
			
			&:active{
				background: #f0f0f0;
			}
			
			.article-item-image{
				image{
					width: 200rpx;
					height: calc(200rpx * 0.75);
				}
			}
			
			.article-item-tilte{
				padding-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				text{
					font-size: 12px;
					color: #777;
					
					&:nth-child(1){
						padding: 5rpx 0;
						font-size: 14px;
						color: #000;
					}
				}
			}
		}
	}

}